<template>
	<view :style="[AppSkinVar]">
		<empty icon="/pages/yuncang/static/default.png" v-if="!emptyHidden" height="230rpx" :text="$t('yuncang.empty1')">
			<view class="text-center e-font-26 c-regular e-m-t-8">
				{{ $t('yuncang.empty2') + userInfo.isRepertoryMsg }}
			</view>
		</empty>
		<template v-else>
			<view class="nav-box e-flex bg-white">
				<view class="e-flex-1 text-center e-p-32" @tap="$goTo('/pages/yuncang/order/index')">
					<view class="e-m-b-12 e-flex-xy-center">
						<image src="/pages/yuncang/static/index/icon1.png" class="img-48"></image>
					</view>
					<text>{{ $t('layout.我的订单') }}</text>
				</view>
				<view class="e-flex-1 text-center e-p-32" @tap="$goTo('/pages/yuncang/stock')">
					<view class="e-m-b-12 e-flex-xy-center">
						<image src="/pages/yuncang/static/index/icon2.png" class="img-48"></image>
					</view>
					<text>{{ $t('yuncang.我的库存') }}</text>
				</view>
				<!-- <view v-if="false" class="e-flex-1 text-center e-p-32" @tap="$goTo('/pages/yuncang/stockSold')">
					<view class="e-m-b-12 e-flex-xy-center">
						<image src="/pages/yuncang/static/index/icon3.png" class="img-48"></image>
					</view>
					<text>{{ $t('yuncang.我的销量') }}</text>
				</view> -->
			</view>
			<view class="e-p-20 e-p-r-36">
				<view class="search-body bg-white" @tap="$goTo('/pages/yuncang/search/index?type=1')">
					<text class="iconfont icon-sousuo e-m-r-20 e-font-28 c-primary"></text>
					<text class="e-font-26 c-regular">{{ $t('yuncang.请输入搜索的商品名称') }}</text>
				</view>
			</view>
			<yuncangGoodsList :list="list" :showLoad="showLoad"></yuncangGoodsList>
		</template>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn';
export default defineComponent({
	mixins: [layoutPageTitleMixIn]
});
</script>

<script setup lang="ts">
import { computed } from 'vue';
import yuncangGoodsList from './child/goods-list.vue';
import { getYuncangGoodsList } from '@/common/request/api';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { onReachBottom } from '@dcloudio/uni-app';
import { useUser } from '@/common/stores';
import { storeToRefs } from 'pinia';

const { userInfo } = storeToRefs(useUser());
const emptyHidden = computed(() => userInfo.value?.isRepertory || false);

const { showLoad, list, isEmpty, handleQueryPage, handleRefresh } = useQueryPage({
	api: getYuncangGoodsList
});
handleRefresh();
onReachBottom(() => {
	handleQueryPage();
});
</script>

<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.nav-box {
	padding: 22rpx 20rpx;
}
.search-body {
	padding: 0 20rpx;
	height: 68rpx;
	line-height: 68rpx;
	border-radius: 34rpx;
}
</style>
